const Fahrenheit = (props) => {
  const { value, onChange } = props;
  return (
    <div>
      <span>请输入摄氏度：</span>
      <input type="text" value={value} onChange={onChange} />
    </div>
  );
};

const Celsius = (props) => {
  const { value } = props;
  return (
    <div>
      <span>转换结果：</span>
      <span>{value * 1.8 + 32} </span>
    </div>
  );
};

const Middle = (props) => {
  return (
    <div>
      <Fahrenheit {...props} />
      <div>计算方法是：摄氏度*1.8+32=华摄氏度</div>
    </div>
  );
};
// 这四个组件的关系 {...props}属性穿透
//   - StudyLift
//     - Middle
//       - Fahrenheit(**)
//     - Celsius(**)

export default class StudyLift extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      temper: "", //摄氏度
    };
  }

  render() {
    const { temper } = this.state;
    return (
      <div>
        <h2>22</h2>
        <hr />
        <Middle
          value={temper}
          onChange={(ev) => this.setState({ temper: Number(ev.target.value) })}
        />
        <hr />
        <Celsius value={temper} />
      </div>
    );
  }
}
